﻿<!doctype html>
<html>
<head>
<title>autoiframe/a</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0; padding:0;}
body {background-color:#F7F7F7; font:12px Arial,Helvetica,sans-serif;}
#autoIframe { display:block; border:5px solid #A5B6C8; }
</style>
</head>
<body>
<h1>autoiframe/index.html</h1>

<iframe id="autoIframe" src="http://t.byzuo.com/autoiframe/b.html" width="1000" height="200" frameborder="0" scrolling="no"></iframe>
<div id="w" style="height:20px; background:#999; color:#FFF">w</div>

<script>
var resetIframeId,
	resetIframeHeight = function(id,url) {
		!resetIframeId && (resetIframeId = document.getElementById(id));
		var h = function(e){
				if(window.postMessage && e.origin.indexOf(url)!=-1){//Event.origin check domain
					document.getElementById('w').innerHTML = e.data +'----'+e.origin;
					resetIframeId.style.height = e.data+'px';
				}else{
					resetIframeId.style.height = e+'px';
				}	
		}		
	if(window.postMessage){
		if(window.attachEvent){
			window.attachEvent('onmessage', h);
		}else{
			window.addEventListener('message', h, true);
		}
	}else{
		navigator.heightChange = h;//hack for ie67
	}
}

resetIframeHeight('autoIframe', 'http://t.byzuo.com');	

</script>
</body>
</html>
